<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/ckgl.css">
    <script src="../javascript/ckgl.js"></script>
    <script src="../javascript/data.js"></script>
    <script src='../lib/bootstrap-3.3.5-dist/js/jquery-3.6.0.js'></script>
    <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <title>Document</title>
    <style>
    </style>
</head>
    <body class="clearfix">
        <header id="header" class="clearfix">
            <span>经销存管理系统</span>
            <div class="clearfix">
                <div>
                    <span class="glyphicon glyphicon-triangle-bottom"></span>
                </div>
                <div>管理员</div>
                <div>
                    <span class="glyphicon glyphicon-user"></span>
                </div>
        </header>
        <div id="left_nav">
            <div id="nav">
                <li id="nav_header">
                    <span class="glyphicon glyphicon-cog"></span>
                    系统菜单
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </li>
                <li page-data='page1'>分类管理</li>
                <li page-data='page2'>库存管理</li>
                <li page-data='page3'>入库管理</li>
                <li page-data='page4'>预警信息设置</li>
                <li page-data='page5'>出库管理</li>
                <li page-data='page6'>用户管理</li>
                <li page-data='page7'>修改密码</li>
            </div>
        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                </div>
            </div>
        </div>
        <div id="box">
                <!-- 选项卡 -->
                <ul id="chuku" >
                    <li onclick="tabClick(this,0)" class="li1">出库记录</li>
                    <li onclick="tabClick(this,1)" class="li1">商品出库</li>
                </ul>
                <div id="content" class="clear">
                    <!-- 表格 -->
                    <div id="content_table" class="content1">
                        <table id="mytable" algin="center" border="1" style="border-collapse: collapse;"  >
                            <thead>
                              <tr>
                                <th>编号</th>
                                <th>商品名称</th>
                                <th>商品分类</th>
                                <th>出库数量</th>
                                <th>出库日期</th>
                                <th>编辑</th>
                                <th>删除</th>
                              </tr>
                            </thead>
                            <tbody id="caozuo">
                      
                            </tbody>
                        </table>
                        <!-- 分页 -->
                        <nav id='yema' aria-label="Page navigation" class="clear">
                            <!-- 上一页下一页箭头 -->
                            <div class="pagination clear">
                              <div id="pre" onclick="prePage()">
                                <a href="#" aria-label="Previous" >
                                  <span aria-hidden="true">&laquo;</span>
                                </a>
                              </div>
                              <div id="pageNum"></div>
                              <div id="next" onclick="nextPage()">
                                <a href="#" aria-label="Next">
                                  <span aria-hidden="true">&raquo;</span>
                                </a>
                              </div>
                            </div>
                          </nav>
                    </div>
                    <!-- 提交内容框  -->
                    <div id="content_xinxi" class="content1" >
                            <div class="neirong clear">
                                <p class="xsmt1">
                                    <span>编号：</span><input type="text" placeholder="编号" id="bianhao" value=  >
                                  
                                    </p>
                                    <p class="zuo">编号</p>
                                <p class="xsmt1">
                                <span>分类：</span> <select  id="ckfl" value=>
                                    <option selected hidden disabled value="">请选择分类</option>
                                      <option value ="分类1">分类1</option>
                                      <option value ="分类2">分类2</option>
                                      <option value ="分类3">分类3</option>
                                      <option value ="分类4">分类4</option>
                                      <option value ="分类5">分类5</option>
                                    </select>
                                <p class="zuo">分类</p>
                                </p>
                                <p class="xsm1">
                                    <span>商品：</span> <select id="ckmc" value=>
                                        <option selected hidden disabled value="">请选择商品</option>
                                          <option value ="商品1">商品1</option>
                                          <option value ="商品2">商品2</option>
                                          <option value ="商品3">商品3</option>
                                          <option value ="商品4">商品4</option>
                                          <option value ="商品5">商品5</option>
                                        </select>
                                <p class="zuo">商品</p>
                                </p>
                                <p class="xsmt1">
                                <span>数量：</span><input type="text" placeholder="数量" id="shuliang" value=  >
                              
                                </p>
                                <p class="zuo">数量</p>
                                <div class="xsmt1">
                                    <p class="chukurq">
                                      <span>入库日期：</span>  <input type="date" class="form-control" id="cukuriqi" value=>
                                    </p>
                                   </div>
                                <p class="xsmt1">
                                <span>备注：</span><textarea class="" value="" placeholder="输入备注">
                                   
                                </textarea>
                                <p class="er">250字以内...</p>
                                </p>
                                <button id="anniu" onclick="addck()" data-toggle="modal"
                                data-target="#myModal">添加分类</button>
                            </div>  
                    </div>
                </div>
        </div>
    <script>
        let anniu=document.getElementById('anniu')
        let pageItem=document.getElementsByClassName('pageItem')//集合
        let li1 = document.getElementsByClassName('li1')
        let dangqianye = 1
        let maxPage
        // let content1=document.getElementsByClassName('content1')tabClick(li[0], 0) 
        //渲染tbody里面根据数据渲染tr td节点
        function showTable(date){//1
            //循环之前先清空
            caozuo.innerHTML = ""
            //循环数组里面的每一项
            date.forEach(item=>{
                //累加显示数据里面的每一项
                caozuo.innerHTML +=`      
                <tr>
                <td>${item.bh}</td>
                <td>${item.spmc}</td>
                <td>${item.spfl}</td>
                <td>${item.cksl}</td>
                <td>${item.ckrq}</td>
                <td>
                <span class="change" data-toggle="modal"
                data-target="#myModal" onclick='bianji(this)'>编辑</span>
                </td>
                <td>
                <span class='del' data-toggle="modal"
                data-target="#myModal" onclick='delsan(this)'>删除</span>
                </td>
                </tr>
                `
            })
        }
        showTable(allData)
        // 渲染分页按钮的方法2
        function goPage(yema) {
        // 用现代绑定获取节点 pageItem的所有节点 应该在渲染pageItem之后获取 
        let pageItemList = document.getElementsByClassName('pageItem')
        for (let i = 0; i < pageItemList.length; i++) {
        // 添加点击事件
        pageItemList[i].addEventListener('click', function () {
            goPage(i + 1)
        })
        }
        //被点击的变色没被点击的不变
        for (let i = 0; i < pageItemList.length; i++) {
            pageItemList[i].style.backgroundColor = 'white' 
            pageItemList[i].style.color = 'black' 
        }
        pageItemList[yema - 1].style.backgroundColor = 'blue'
        pageItemList[yema - 1].style.color='white'
        let qishi = (yema - 1) * 10
        let arrStu = allData.slice(qishi, qishi + 10)   //
        showTable(arrStu)
        dangqianye = yema
        }
        // 页码
        function showDiv(data) {
        let pageNum = document.getElementById('pageNum')
        pageNum.innerHTML = ''
        maxPage = Math.ceil(data.length / 10)  //向上取整
        for (let i = 1; i <= maxPage; i++) {
            pageNum.innerHTML += `<div class="pageItem">${i}</div>`
        }
        }
        showDiv(allData)
        goPage(dangqianye)
        //上一页方法 当当前页等于第一页的时候就不再执行
        function prePage() {
        if (dangqianye != 1) {
            dangqianye--
            goPage(dangqianye)
        }
        }
        //下一页方法当下一页小于最大页的时候才执行
        function nextPage() {
        if (dangqianye < maxPage) {
            dangqianye++
            goPage(dangqianye)
        }
        }
        //选项卡
        tabClick(li1[0], 0) 
        //导航
        let h = $(window).height()
        let h_judge
        $('#left_nav').css({
        'height': h + 'px',
        })
        $('#nav>li:first-child').on('click', function () {
        pullDown($(this))
        })
        $('#nav>li:first-child').siblings().on('click', function () {
        jumpPage($(this))
        })
  
    </script>
<body>

</html>